<script setup>
import axios from 'axios';
import { ref } from 'vue';
// import FormData from 'form-data';
const students = ref([
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' },
      { stuNo: '', name: '', classNo: '' }
    ]);

let press = 0;


var data = new FormData();
data.append('usr', 'HBGYDX');
data.append('pwd', '123456');
data.append('id', '628');

var config = {
   method: 'post',
   url: '/apr/cgi/data.php',
   headers: { 
      'Content-Type': 'multipart/form-data; boundary=--------------------------658559184002131110438280', 
   },
   data : data
};

axios(config)
.then(function (response) {
   press=response.data.data[0].d1;
   console.log(press);
})
.catch(function (error) {
   console.log(error);
});

const confirm = async () => {
      // 提取五个学号
      const studentNumbers = students.value.map(student => student.stuNo);
      console.log(studentNumbers)

      // 构建参数对象
      const dataToSubmit = {
        stuNos: studentNumbers,
        press: press,
      };

      try {
        // 发送请求并传递参数对象
        const response = await axios.post('api/administrator/confirmNeiya', dataToSubmit);
        if (response.data.code === 1) {
          console.log(response.data);
          alert("内压实验控制端确认成功");
            // console.log(students) 
        } else {
          alert(response.data.msg);
        }
        
      } catch (error) {
        console.error(error);
        alert('确认失败：发生错误');
      }
    };

    const finish = async () => {
      // 提取五个学号
      const studentNumbers = students.value.map(student => student.stuNo);
      console.log(studentNumbers)

      // 构建参数对象
      // const dataToSubmit = {
      //   stuNos: JSON.parse(studentNumbers),
      // };

      try {
        // 发送请求并传递参数对象
        const response = await axios.post('api/administrator/finshNeiyaExp', studentNumbers);
        if (response.data.code === 1) {
          console.log(response.data);
          alert(response.data.data);
            // console.log(students) 
        } else {
          alert(response.data.msg);
        }
        
      } catch (error) {
        console.error(error);
        alert('结束实验失败：发生错误');
      }
    };

    

const getStudents = async()=>{
    try {
        // 发送登录请求
        const response = await axios.get('api/administrator/updateNeiyagroup');
        //console.log("123,",(response.data))
        if (response.data.code === 1) {
          const newData = response.data.data;
            console.log(newData)
          // 更新学生数组循环
          for (let i = 0; i < 5; i++) {
            if (i < newData.length) {
              students.value[i] = newData[i];
            } else {
              students.value[i] = { stuNo: '', name: '', classNo: '' };
            }
          }
        } else {
          alert(response.data.msg);
        }
      } 
      catch (error) {
        console.error(error);
        // 处理其他错误情况
        alert('获取学生信息失败：发生错误');
      }
}
</script>

<template>
  <div class="page flex-column">
    <div class="top flex-row">
      <div class="top-left ">
        <div class="flex-row">
        <table>
          <tr>
            <td colspan="3" class="th-style">实验小组人员</td>
          </tr>
          <tr>
            <td>学号</td><td>姓名</td><td>班级</td>
          </tr>
          <tr v-for="student in students" :key="student.id">
                  <td>{{ student.stuNo || '' }}</td>
                  <td>{{ student.name || '' }}</td>
                  <td>{{ student.classNo || '' }}</td>
              </tr>
          <!-- <tr>
            <td></td><td></td><td></td>
          </tr>
          <tr>
            <td></td><td></td><td></td>
          </tr>
          <tr>
            <td></td><td></td><td></td>
          </tr>
          <tr>
            <td></td><td></td><td></td>
          </tr>
          <tr>
            <td ></td><td></td><td></td>
          </tr> -->
        </table>
      </div>
      </div>

      <div class="flex-row">
      <div class="top-right flex-column">
        <div class="top-right1">
          内压实验控制面板
        </div>
        <div class="top-right2 top-right-font">
          ①请老师填写并完成实验人员核对后点击 “开始实验” ， 学生端方可点击开始实验。
        </div>
        <div class="top-right3 top-right-font">
          ②待实验完毕后，请老师点击“结束实验”，提醒学生实验结束，下载实验数据。
        </div>
        <div class="top-right4 top-right-font">
          ③待本组实验人员完成实验后，点击 “小组更新” ， 进行下一组实验人员实验的控制。
        </div>
      </div>
      </div>
    </div>
    <div class="bottom flex-column">
      <div class="bottom-button flex-row">
        <div class="button1 button-font flex-row" @click="getStudents">小组更新</div>
        <div class="button2 button-font flex-row" @click="confirm">确认</div>
        <div class="button3 button-font flex-row" @click="finish">结束实验</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  width: 100%;
  height: 100%;
}
.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top {
  width: 100%;
  height: 604px;
}
.bottom {
  width: 100%;
  height: 100px;
}
.top-left {
  width: 534px;
  height: 520px;
  margin-top: 75px;
  margin-left: 186px;
  margin-bottom: 11px;
}
.top-right {
  width: 570px;
  height: 604px;
  margin-top: 75px;
  margin-bottom: 11px;
}
table {
  width: 582px;
  height: 466px;
  border-collapse:collapse; /* 边框模式 */
}

tr {
  height: 43px;
}

td {
  border: 1px solid #808080;
  color: black;
  width: 196px;
  height: 68px;
  font-size: 30px;
  text-align: center;
  justify-content: center;
}
.th-style {
  font-size: 35px;
  background-color: rgb(232,232,232);
}
.top-right1 {
  width: 222px;
  height: 30px;
  color: black;
  font-size: 26px;
  font-weight: bold;
}
.circle-number {
  display: inline;
  width: 25px; /* 圆的宽度 */
  height: 25px; /* 圆的高度 */
  border-radius: 50%; /* 使用边框半径使其变为圆形 */
  background-color:white; /* 圆的背景颜色 */
  color:black; /* 文字颜色 */
  text-align: center; /* 文字水平居中对齐 */
  line-height: 25px; /* 文字垂直居中对齐 */
  font-size: 16px; /* 文字大小 */
  border: 1px solid black;
}
.top-right2 {
  width: 300px;
  height: 95px;
  margin-top: 52px;
}
.top-right3 {
  width: 300px;
  height: 95px;
}
.top-right4 {
  width: 300px;
  height: 95px;
}
.top-right-font {
  font-size: 20px;
  color: black;
}
.bottom-table{
  width: 572px;
  height: 245px;
  margin-left: 104px;
}
.bt {
  width: 572px;
  height: 245px;
  border-collapse:collapse; /* 边框模式 */
}

.btr {
  height: 49px;
}

.btr>td {
  border: 1px solid #808080;
  color: black;
  width: 95px;
  height: 49px;
  font-size: 22px;
  text-align: center;
  justify-content: center;
}
.bottom-button {
  width: 100%;
  height: 125px;
}
.button1 {
  margin-left: 50px;
}
.button2 {
  margin-left: 288px;
}
.button3 {
  margin-left: 255px;
}
.button-font {
  font-size: 20px;
  color: black;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid #808080;
  width: 124px;
  height: 55px;
  margin-top: 36px;
}
</style>
